<template>
  <div>
    <van-cell-group>

      <van-field
        label="新密码"
        v-model="password"
        type="password"
        placeholder="请输入新密码"
      />
            <div class="code">
                <van-field
                    label="验证码"
                    v-model="code"
                    @click-icon="getCode"
                    placeholder="请输入验证码">
                </van-field>
                <div class="verifi_code red"
                     :class="{verifi_code_counting: counting}"
                     @click="getCode">
                    <countdown v-if="counting" :time="60000" @end="countdownend">
                        <template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
                    </countdown>
                    <span v-else>获取验证码</span>
                </div>
            </div>
    </van-cell-group>

    <div class="bottom_btn">
      <van-button size="large" type="danger" @click="modifypassword">保存</van-button>
    </div>
  </div>
</template>


<script>
import { authsendCode, authReset } from '@/api/api';
import { removeLocalStorage } from '@/utils/local-storage';
import { Field } from 'vant';

export default {
  data: () => ({
    password: '',
    mobile: '',
    code: '',
    counting: false
  }),

  methods: {
    modifypassword() {
      this.mobile = this.$route.params.mobile;
      if (this.passwordValid()) {
        authReset({
          password: this.password,
          mobile: this.mobile,
          code: this.code
        })
        .then(() => {
          this.$dialog.alert({ message: '保存成功, 请重新登录.' })
          this.$router.push({ name: 'user-information' });
        });
      }
    },
    passwordValid() {
      return true;
    },
    getCode() {
        this.mobile = this.$route.params.mobile;
        if(this.mobile === ''){
            this.$toast.fail('请输入号码');
            return
        }
        let data = {
            mobile: this.mobile
        };
        if (!this.counting) {
            authsendCode(data).then(res => {
                console.log(res)
                this.$toast.success('发送成功');
                this.counting = true;
            }).catch(error => {
                this.$toast.fail(error.data.errmsg);
                this.counting = false;
            });
        }
    },
    countdownend() {
        this.counting = false;
    }
  },

  components: {
    [Field.name]: Field
  }
};
</script>


<style lang="scss" scoped>
@import '../../../../assets/scss/var';
@import '../../../../assets/scss/mixin';
.bottom_btn {
  padding: 30px 15px 0 15px;
}

.code {
    position: relative;
}

.verifi_code {
  position: absolute;
  top: 50%;
  padding-left: 10px;
  right: 0;
  transform: translate(-20%, -50%);
  &::after {
    border-bottom: 0;
    border-left: 1px solid $border-color;
  }

  &_counting {
    color: #db3d3c;
  }
}
</style>
